<template>
  <Title title="推荐新音乐" />
  <div class="grid grid-flow-row grid-cols-2 2xl:grid-cols-5 gap-y-2.5 gap-x-5 cursor-pointer">
    <div v-for="item in newMusicList" :key="item.id" class="flex hover:bg-slate-100" @click="setId(item.id)">
      <img :src="item.picUrl" alt="" class="w-12 h-12 object-cover rounded flex-shrink-0" />
      <div class="px-2 text-xs flex flex-auto flex-col w-1/3">
        <div class="truncate mt-1.5">{{ item.name }}</div>
        <!-- <div class="mt-1.5">{{ item.song.artists[0].name }}</div> -->
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Title from '../title/Title.vue'
import { useMusicStore } from '@/stores/music'
import { toRefs } from 'vue'
import { usePlayerStore } from '@/stores/player'

const { newMusicList, getNewMusicList } = toRefs(useMusicStore())
const { setId } = toRefs(usePlayerStore())

getNewMusicList.value()
</script>

<style lang="less" scoped></style>
